<!DOCTYPE html>
<html>
  <head>
    <title>Custom Icons Tutorial - Leaflet</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }
      #map {
        width: 600px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
      var map = L.map('map').setView([51.5, -0.09], 13)

      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      }).addTo(map)

      var LeafIcon = L.Icon.extend({
        options: {
          shadowUrl: 'https://leafletjs.cn/examples/custom-icons/leaf-shadow.png',
          iconSize: [38, 95],
          shadowSize: [50, 64],
          iconAnchor: [22, 94], // 图标的锚点，与标记的位置对应
          shadowAnchor: [4, 62],
          popupAnchor: [-3, -76],
        },
      })

      // 创建标记图标
      var greenIcon = new LeafIcon({ iconUrl: 'https://leafletjs.cn/examples/custom-icons/leaf-green.png' }),
        redIcon = new LeafIcon({ iconUrl: 'https://leafletjs.cn/examples/custom-icons/leaf-red.png' }),
        orangeIcon = new LeafIcon({ iconUrl: 'https://leafletjs.cn/examples/custom-icons/leaf-orange.png' })

      L.marker([51.5, -0.09], { icon: greenIcon }).bindPopup('I am a green leaf.').addTo(map)
      L.marker([51.495, -0.083], { icon: redIcon }).bindPopup('I am a red leaf.').addTo(map)
      L.marker([51.49, -0.1], { icon: orangeIcon }).bindPopup('I am an orange leaf.').addTo(map)
    </script>
  </body>
</html>
